<template>
  <div class="add">
    <el-form :model="ruleForm"
             :rules="rules"
             ref="ruleForm"
             label-width="130px"
             class="demo-ruleForm">
      <el-form-item label="密集架数量" prop="shelvingNum">
        <el-input-number v-model="ruleForm.shelvingNum"
                         controls-position="right"
                         style="width: 100%"
                         :min="1"
                         :max="1000"></el-input-number>
      </el-form-item>
      <el-form-item label="列数">
        <el-input-number v-model="ruleForm.columnNum"
                         controls-position="right"
                         style="width: 100%"
                         :min="1"
                         :max="1000"></el-input-number>
      </el-form-item>
      <el-form-item label="行数">
        <el-input-number v-model="ruleForm.rowNum"
                         controls-position="right"
                         style="width: 100%"
                         :min="1"
                         :max="1000"></el-input-number>
      </el-form-item>

      <el-form-item>
        <el-button type="primary"
                   size="small"
                   :loading="saveLoading"
                   @click="submitForm('ruleForm')">保存</el-button>
        <el-button size="small"
                   :loading="saveLoading"
                   @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import {
  addDenseFrameList,
  editDenseFrameList
} from '../../../../../../api/house/houseArchives'

export default {
  name: 'addDense',
  props: {
    type: {
      type: String,
      default: ''
    },
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      saveLoading: false,
      ruleForm: {
        shelvingNum: '',
        columnNum: '',
        rowNum: ''
      },
      rules: {
        shelvingNum: [
          { required: true, message: '请输入密集架数量', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    if (this.type === 'edit') {
      this.ruleForm = this.rowData
    }
  },
  watch: {
    rowData: {
      handler () {
        this.ruleForm = this.rowData
      },
      deep: true
    },
    type () {
      if (this.type === 'add') {
        this.ruleForm = {
          shelvingNum: '1',
          columnNum: '1',
          rowNum: '1'
        }
      } else {
        this.ruleForm = this.rowData
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.saveLoading = true
          if (this.type === 'add') {
            this.ruleForm.idRepo = this.$route.query.id
            this.ruleForm.repoCode = this.$route.query.repoCode
          }

          const request = this.type === 'add' ? addDenseFrameList(this.ruleForm) : editDenseFrameList(this.ruleForm)

          request.then(res => {
            this.$message.success(this.type === 'add' ? '新增成功！' : '修改成功')
            this.$emit('handleSuccess')
            this.resetForm()
            this.saveLoading = false
          }).catch(() => {
            this.saveLoading = false
          })
        } else {
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
  .add {
    padding-right: 65px;
  }
</style>
